/* 设置页面整体的字体、外边距和内边距 */
body {
    /* 使用 Arial 字体，如果没有则使用无衬线字体 */
    font-family: Arial, sans-serif;
    /* 去除页面整体的外边距 */
    margin: 0;
    /* 去除页面整体的内边距 */
    padding: 0;
}

/* 设置页面头部的样式 */
header {
    /* 设置头部背景颜色为白色 */
    background-color: rgb(248, 155, 155);
    /* 设置头部文字颜色为黑色 */
    color: black;
    /* 设置头部内边距，上下 10px，左右 20px */
    padding: 10px 20px;
    /* 头部文字居中显示 */
    text-align: center;
}

/* 设置导航栏链接的样式 */
nav a {
    /* 设置导航栏链接文字颜色为黑色 */
    color: black;
    /* 设置导航栏链接之间的外边距为 0 10px */
    margin: 0 10px;
    /* 去除导航栏链接的下划线 */
    text-decoration: none;
}

/* 设置页面主体部分的样式 */
main {
    /* 设置主体部分的内边距为 20px */
    padding: 20px;
}

/* 商品容器样式 - 相对定位容器/Product Container Style - Relative Positioning Container
   width: 70% 控制容器宽度占父元素70%
   height: 70% 控制容器高度占父元素70%
   left/bottom: 通过偏移实现侧边栏布局
   z-index: 确保内容在页面层级上方 */
.product-container {
    position: relative;
    width: 75%;
    height: 70%;
    margin: 1px auto 0;
    z-index: 50;
    background-color: white;
    /* right: 100px; */
    left: 150px;
    bottom: 580px;
}

/* 居中容器 - 绝对定位居中技巧/Centered Container - Absolute Positioning Technique
   left:50% + margin-left:-50%width 实现水平居中
   transform:translate 的替代方案 */
.centered-div {
    position: absolute;
    left: 62.5%;
    width: 200px;
    height: 40px;
    margin-top: -45px;
    margin-left: -100px;
    background-color: rgb(250, 248, 248);
    padding: 20px;
    border-radius: 8px;
    top: 150px;
}
/* 商品列表弹性布局/Flex Layout for Product List
   display:flex 启用弹性盒子布局
   flex-wrap:wrap 允许项目换行
   justify-content:center 主轴居中排列
   gap:20px 设置项目间距
   min-height:400px 保证最小可视高度 */
   .product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    min-height: 400px;
    top: 50px;
    transform: scale(1.01); /* 使用 transform 属性的 scale 方法将元素整体放大 1.5 倍 */
    transform-origin: center; /* 设置缩放的中心点为元素中心，默认也是中心 */
}

/* 无商品提示样式/No Products Warning Style
   使用柔和的灰色(#666)提升可读性
   1.2em 适当放大字体尺寸 */
.no-products {
    text-align: center;
    color: #666;
    padding: 20px;
    font-size: 1.2em;
}


/* 设置单个商品项的样式 */
.product {
    /* 设置商品项的边框，1px 实线，颜色为 #ccc */
    border: 1px solid #ccc;
    /* 设置商品项的内边距为 10px */
    padding: 10px;
    /* 商品项内文字居中显示 */
    text-align: center;
    /* 设置商品项的宽度为 200px */
    width: 300px;

}

/* 设置商品分类列表的样式 */
.category-list {
    /* 去除列表项的默认符号 */
    list-style-type: none;
    /* 去除列表项的默认内边距 */
    padding: 0;
}

/* 设置商品分类列表项的样式 */
.category-list li {
    /* 设置列表项的底部外边距为 10px */
    margin-bottom: 15px;
}

/* 搜索框容器样式 */
.search-container {
    /* 使用弹性布局 */
    display: flex;
    /* 搜索框容器内元素水平居中 */
    justify-content: center;
    /* 设置搜索框容器的上下外边距为 20px */
    margin: 20px 0;
}

/* 搜索输入框样式 */
#search-input {
    /* 设置搜索输入框宽度为屏幕宽度的五分之三 */
    width: 50%; 
    /* 设置搜索输入框内边距为 10px */
    padding: 10px;
    /* 设置搜索输入框的边框，1px 实线，颜色为 #ccc */
    border: 1px solid #ccc;
    /* 去除搜索输入框右侧边框 */
    border-right: none;
    /* 设置搜索输入框左上角边框圆角为 4px */
    border-top-left-radius: 4px;
    /* 设置搜索输入框左下角边框圆角为 4px */
    border-bottom-left-radius: 4px;
}

/* 搜索按钮样式 */
#search-button {
    /* 设置搜索按钮内边距，上下 10px，左右 20px */
    padding: 10px 20px;
    /* 设置搜索按钮背景颜色为 #007BFF */
    background-color: #007BFF;
    /* 设置搜索按钮文字颜色为白色 */
    color: white;
    /* 设置搜索按钮的边框，1px 实线，颜色为 #007BFF */
    border: 1px solid #007BFF;
    /* 设置搜索按钮右上角边框圆角为 4px */
    border-top-right-radius: 4px;
    /* 设置搜索按钮右下角边框圆角为 4px */
    border-bottom-right-radius: 4px;
    /* 鼠标悬停在按钮上时显示为手型 */
    cursor: pointer;
}

/* 搜索按钮悬停样式 */
#search-button:hover {
    /* 鼠标悬停时，搜索按钮背景颜色变为 #0056b3 */
    background-color: #0056b3;
}

/* 一级菜单和二级菜单的容器样式 */
.menu-container {
    display: flex;
    position: relative;
}

/* 一级菜单样式 */
.main-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 115px;
    position: sticky;
    top: 80px;
    height: calc(100vh - 100px);
}

/* 一级菜单列表项样式 */
.main-menu li {
    /* 设置列表项的定位方式为相对定位 */
    position: relative;
}

/* 二级菜单样式 */
.sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 90%;
    z-index: 1000;
    background: white;
    min-width: 80px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* 一级菜单列表项链接样式 */
.main-menu li a {
    /* 将链接显示为块级元素 */
    display: block;
    /* 设置链接内边距为 10px */
    padding: 10px;
    /* 去除链接的下划线 */
    text-decoration: none;
    /* 设置链接文字颜色为 #333 */
    color: #333;
    /* 设置链接背景颜色为 #f4f4f4 */
    background-color: #f4f4f4;
    /* 设置链接底部边框，1px 实线，颜色为 #ddd */
    border-bottom: 1px solid #ddd;
}

/* 一级菜单列表项链接悬停样式 */
.main-menu li a:hover {
    /* 鼠标悬停时，链接背景颜色变为 #ddd */
    background-color: #ddd;
}

/* 二级菜单样式 */
.sub-menu {
    /* 默认隐藏二级菜单 */
    display: none;
    /* 设置二级菜单的定位方式为绝对定位 */
    position: absolute;
    /* 二级菜单相对于一级菜单列表项向右偏移 200px */
    left: 118px;
    /* 二级菜单与一级菜单列表项顶部对齐 */
    top: 0;
    /* 去除列表项的默认符号 */
    list-style-type: none;
    /* 去除列表项的默认内边距 */
    padding: 0;
    /* 去除列表项的默认外边距 */
    margin: 0;
    /* 设置二级菜单的宽度为 200px */
    width: 200px;
    /* 为二级菜单添加阴影效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 二级菜单列表项链接样式 */
.sub-menu li a {
    /* 设置二级菜单列表项链接背景颜色为白色 */
    background-color: #fff;}